<template>
  <div class="icons">

    <swiper :options="swiperOptions">
      <swiper-slide v-for="item in page"
                    :key="item.id">
        <div class="icons-item"
             v-for="icon in item"
             :key="icon.id">
          <img :src='icon.imgSrc'>
          <p>{{icon.info}}</p>
        </div>
      </swiper-slide>

      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOptions: {}
    }
  },
  props: ['iconsList'],
  computed: {
    page () {
      let pages = [];
      this.iconsList.forEach((item, index) => {
        let idx = Math.floor(index / 8);
        if (!pages[idx])
          pages[idx] = [];
        pages[idx].push(item)


      })
      return pages;
    }
  }

}
</script>
<style scoped>
.icons {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.icons-item {
  width: 25%;
  padding-bottom: 25%;
  height: 0;
  float: left;
}
.icons-item img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  margin: 0 auto;
  padding-top: 0.2rem;
}
.icons-item p {
  font-size: 0.28rem;
  text-align: center;
  color: #212121;
  margin-top: 0.1rem;
}
.icons >>> .swiper-pagination-bullet-active {
  background: yellow;
}
</style>